<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Approval Management</title>
    <script src="js/jquery-3.2.1.js"></script>
    <script src="js/js.cookie.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/reset.css">
    <script src="js/bootstrap.min.js" ></script>
    <script src="js/bootstrap-datepicker.min.js"></script>
    <link href="css/bootstrap-datepicker.min.css" rel="stylesheet">
    <script>
        $(document).ready(function() {
            // 获取角色

            var role;
            var loginStatusText = Cookies.get('loginStatus')
            if (loginStatusText) {
                var loginStatus
                try {
                    loginStatus = JSON.parse(loginStatusText);
                    role = loginStatus.role
                } catch (error) {
                    console.error("An error occurred:", error);
                }
            }

            // 初始化日期选择器
            $('#recordDate').datepicker({
                format: 'yyyy-mm-dd',
                autoclose: true
            }).on('changeDate', function(e) {
                $(this).datepicker('hide');
            });

            // 新增按钮的触发函数
            $('#saveBtn').click(function() {
                var approvalData = {
                    userName: $('#userName').val(),
                    recordDate: $('#recordDate').val(),
                    remark: $('#remark').val()
                };
                if (!approvalData.recordDate) {
                    alert('日期是必选项');
                    return;
                }
                $.ajax({
                    url: '/api/approve/add',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(approvalData),
                    success: function(response) {
                        if (response.stateCode === '200') {
                            alert('新增成功');
                            $('#addModal').modal('hide');
                            searchList(); // 刷新列表
                        } else {
                            alert('新增失败：' + response.msg);
                        }
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        alert('请求失败：' + textStatus);
                    }
                });
            });

            // 驳回按钮的触发函数
            $(document).on('click', '.rejectBtn', function() {
                var id = $(this).data('id');
                var approvalData = {
                    id: id,
                    status: 'reject' // 假设'reject'是驳回状态的字段值
                };
                $.ajax({
                    url: '/api/approve/reject',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(approvalData),
                    success: function(response) {
                        if (response.stateCode === '200') {
                            alert('驳回成功');
                            searchList(); // 刷新列表
                        } else {
                            alert('驳回失败：' + response.msg);
                        }
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        alert('请求失败：' + textStatus);
                    }
                });
            });

            // 审批通过按钮的触发函数
            $(document).on('click', '.approveBtn', function() {
                var id = $(this).data('id');
                var approvalData = {
                    id: id,
                    status: 'don' // 假设'don'是审批通过状态的字段值
                };
                $.ajax({
                    url: '/api/approve/approve',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(approvalData),
                    success: function(response) {
                        if (response.stateCode === '200') {
                            alert('审批通过成功');
                            searchList(); // 刷新列表
                        } else {
                            alert('审批通过失败：' + response.msg);
                        }
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        alert('请求失败：' + textStatus);
                    }
                });
            });

            // 搜索列表
            function searchList() {
                var name = $('#searchName').val();
                console.log('role->' + role)
                $.ajax({
                    url: '/api/approve/list',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({ name: name }),
                    success: function(response) {
                        var data = response.data;
                        var tableContent = '';
                        data.forEach(function(item) {
                            tableContent += '<tr>' +
                                '<td>' + item.id + '</td>' +
                                '<td>' + item.userName + '</td>' +
                                '<td>' + item.recordDate + '</td>' +
                                '<td>' + item.statusName + '</td>' +
                                '<td>' + item.remark + '</td>' +
                                '<td>' ;
                                // '<button class="btn btn-primary btn-xs editBtn" data-id="' + item.id + '">编辑</button> ' +
                                // '<button class="btn btn-danger btn-xs deleteBtn" data-id="' + item.id + '">删除</button> ';
                            if (role === 'manager' || role === 'general_manager') {
                                tableContent += '<button class="btn btn-success btn-xs approveBtn" data-id="' + item.id + '">批准</button> ' +
                                    '<button class="btn btn-warning btn-xs rejectBtn" data-id="' + item.id + '">驳回</button>';
                            }
                            tableContent += '</td>' +
                                '</tr>';
                        });
                        $('#approvalList').html(tableContent);
                    }
                });
            }

            // 搜索列表
            $('#searchBtn').click(searchList);

            // 初始化搜索列表
            searchList();
        });
    </script>
    <script>
        $(function () {
            $('#header').load('admin_header.html');
        })
    </script>
</head>
<body>
<div id="header"></div>
<div class="container">
    <h2>审批管理</h2>
    <div class="input-group">
        <input type="text" class="form-control" id="searchName" placeholder="搜索用户名">
        <span class="input-group-btn">
            <button class="btn btn-default" id="searchBtn">查询</button>
        </span>
    </div>
    <button class="btn btn-success" id="addBtn" data-toggle="modal" data-target="#addModal">新增</button>
    <table class="table table-striped" >
        <thead>
        <tr>
            <th>编号</th>
            <th>用户名</th>
            <th>记录日期</th>
            <th>状态</th>
            <th>备注</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="approvalList">
        </tbody>
    </table>
</div>

<!-- 新增/编辑模态框 -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
                <h4 class="modal-title">新增/编辑审批</h4>
            </div>
            <div class="modal-body">
                <input type="hidden" id="approvalId">
<%--                <div class="form-group">--%>
<%--                    <label for="userName">用户名</label>--%>
<%--                    <input type="text" class="form-control" id="userName" required>--%>
<%--                </div>--%>
                <div class="form-group">
                    <label for="recordDate">记录日期</label>
                    <input type="text" class="form-control" id="recordDate" required>
                </div>
                <div class="form-group">
                    <label for="remark">请假理由</label>
                    <textarea class="form-control" id="remark" required></textarea>
                </div>
                <button class="btn btn-primary" id="saveBtn">保存</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>
